<template>
    
    <div>
        <div>
            <button @click="sortByKey(sum.tab,'index')">排序</button>
        </div>
        <table id="tab">
            <thead>
                <tr>
                    <th v-for="item in sum.header">{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in sum.tab">
                    <td>{{item.index}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
  name: 'mytable',
    data(){
      return{
          stab:{}
      }
    },
  props: {
    sum:{
       Type:Object
    }
  },
    methods:{
        sortByKey : function(array,key){
            return array.sort(function(a,b){
                var x = a[key];
                var y = b[key];
                return((x<y)?-1:((x>y)?1:0));
            })
        }
    }
}
</script>
<style lang="less">
    #tab{
        border: 1px solid #ccc;
        width: 80%;
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 auto;
        tr{
            padding: 5px;
            th{
                text-transform: uppercase;
                font-size: 14px;
                letter-spacing: 1px;
                padding: 10px;
                text-align: center;
                border: 1px solid #ddd;
            }
            td{
                padding: 10px;
                text-align: center;
                border: 1px solid #ddd;
            }
        }
    }
</style>
